import * as React from 'react'
import { Col, Row, Tooltip, Card } from '@douyinfe/semi-ui';
import { VChart } from "@visactor/react-vchart";
import './modal.css'
import DataIndexSettingModal from './DataindexSettingModal';

import { IconHelpCircle } from '@douyinfe/semi-icons';


export default function BigScreen() {
    const KeyIndexFields = [
        {
            name: '累计销售额',
            desc: '今日截止当前更新时间全部有效抖音号累加的订单数量',
            value: 3,
        },
        {
            name: '累计订单量',
            desc: '今日截止当前更新时间全部有效抖音号累加的销量',
            value: 3,
        },
        {
            name: '累计销量',
            desc: '今日截止当前更新时间全部有效抖音号累加的成功退款金额',
            value: 3,
        },
        {
            name: '累计成交人数',
            desc: '当天支付成功或货到付款确认的汇总去重人数',
            value: 3,
        },
        {
            name: '场均销售额',
            desc: '直播间成交人数/累计观看人数*100%',
            value: '0%',
        },
        {
            name: '场均订单量',
            desc: '累计成交粉丝数（当天）/累计成交人数（当天）*100%',
            value: '0%',
        },
        {
            name: '场均整体ROI',
            desc: '累计成交粉丝数（当天）/累计成交人数（当天）*100%',
            value: '0%',
        },
        {
            name: '商品点击人数',
            desc: '累计成交粉丝数（当天）/累计成交人数（当天）*100%',
            value: '0%',
        }
    ];

    const chart = {
        type: 'sequence',
        title: {
            visible: true,
            text: '100% stacked line chart of cosmetic products sales',
            orient: 'top'
        },
        legends: [{ visible: true, position: 'left', orient: 'top', id: 'line' }],
        crosshair: {
            "xField": {
                "visible": true,
                "label": {
                    "visible": true
                }
            },
            "yField": {
                "visible": true,
                "label": {
                    "visible": true
                }
            }
        },
        series: [
            {
                type: 'line',
                data: {
                    values: [
                        { time: 1662321102, type: 'Product A', value: 7 },
                        { time: 1662321102, type: 'Product B', value: 50 },
                        { time: 1662321102, type: 'Product C', value: 18 },
                        { time: 1662321112, type: 'Product A', value: 30 },
                        { time: 1662321112, type: 'Product B', value: 20 },
                        { time: 1662321112, type: 'Product C', value: 8 },

                        { time: 1662321122, type: 'Product A', value: 17.5 },
                        { time: 1662321122, type: 'Product B', value: 0 },
                        { time: 1662321122, type: 'Product C', value: 30 },
                    ]
                },
                xField: 'time',
                yField: 'value',
                id: 'line',
                seriesField: 'type',
                animation: true,
                point: {
                    visible: true
                },
                label: {
                    style: {
                        visible: true,
                        fill: 'black'
                    }
                },
                clipHeight: 800,
                legends: [{ visible: true, position: 'left', orient: 'top' }, { visible: true, position: 'left', orient: 'top' }],
                axes: [
                    {
                        orient: 'top',
                        visible: true
                    }
                ]
            },
            {
                type: 'dot',
                dataId: 'jiangjie',
                xField: 'event_time',
                yField: 'id',
                seriesGroupField: 'type',
                titleField: 'type',
                clipHeight: 100,
                title: {
                    style: {
                        fill: 'rgba(var(--semi-lime-5), 1)',
                    }
                },
                subTitle: {
                    style: {
                    }
                },
                symbol: {
                    style: {
                    }
                }
            },
            {
                type: 'dot',
                dataId: 'xiajia',
                xField: 'event_time',
                yField: 'id',
                seriesGroupField: 'type',
                titleField: 'type',
                clipHeight: 100,
                title: {
                    style: {
                        fill: 'rgba(var(--semi-lime-5), 1)',
                    }
                },
                subTitle: {
                    style: {
                    }
                },

            }
        ],
        axes: [
            {
                orient: 'top',
                type: 'time',
                range: {
                    min: 1662321102,
                    max: 1662321192
                },
                layers: [
                    {
                        tickStep: 1,
                        timeFormat: '%H:%M:%S'
                    }
                ]
            }
        ],
        data: [
            {
                id: 'jiangjie',
                values: [
                    {
                        id: '683827422612367xxxx',
                        type: '讲解',
                        dots: [
                            {
                                event_time: 1662321122,
                            },
                            {
                                event_time: 1662321130,
                            }
                        ]
                    }
                ]
            },
            {
                id: 'xiajia',
                values: [
                    {
                        id: '683827422612367xxxx',
                        type: '商品',
                        dots: [
                            {
                                event_time: 1662321122,
                            },
                            {
                                event_time: 1662321130,
                            }
                        ]
                    }
                ]
            }
        ],
        dataZoom: [
            {
                orient: 'bottom',
                // xAxisIndex: 3,
                // regionIndex: [1, 2, 3, 4],
                start: 0.1,
                endValue: 1662351800,
                startText: {
                    formatMethod: text => Math.floor(text)
                },
                endText: {
                    formatMethod: text => Math.floor(text)
                }
            }
        ],
    };

    return (
        <>
            <DataIndexSettingModal />



            <Row type="flex"
                style={{
                    border: 'var( --semi-color-border) 1px solid',
                    borderRadius: 'var(--semi-border-radius-medium)',
                    padding: '22px 40px 17px 20px',
                    color: 'rgba(var(--semi-grey-8), 1)',
                }}
            >
                {
                    KeyIndexFields.map((item) => (
                        <Col span={6} style={{ padding: '10px 30px' }} >
                            <div>
                                <span style={{ float: 'left', marginRight: '6px', fontSize: '14px' }}>{item.name}</span>
                                <Tooltip
                                    content={
                                        <article>
                                            {item.desc}
                                        </article>
                                    }
                                    arrowPointAtCenter={false}
                                    position={'top'}
                                    key={item.name}
                                >
                                    <div style={{ paddingTop: '3px' }}>
                                        <IconHelpCircle size={14}
                                            style={{ verticalAlign: 'middle', marginLeft: '5px', cursor: 'pointer' }} />
                                    </div>
                                </Tooltip>

                                <div style={{ fontWeight: 'bold', fontSize: '20px', marginTop: '10px' }}>{item.value}</div>
                            </div>

                        </Col>
                    ))
                }
            </Row>

            <Row>
                <Card
                    shadows='always'
                    title='本场数据'
                    style={{ marginTop: 10 }}
                >
                    <VChart
                        spec={{
                            height: 1000,
                            ...chart
                        }}
                        option={{
                            mode: "desktop-browser",
                        }}
                    />
                </Card>

            </Row>

            {/* <Scheduler
                isLoading={isLoading}
                data={[]}
                onItemClick={(clickedItem) => console.log(clickedItem)}
                onFilterData={() => {
                }}
                onClearFilterData={() => {
                }}
                config={{
                    filterButtonState: 0,
                    zoom: 0,
                    lang: "en",
                    maxRecordsPerPage: 20,
                }}
            /> */}
        </>
    )
}
